import React, { Component, PropTypes } from 'react';


var INPUT = React.createClass({
    getInitialState: function () {
        return {value: ''};
    },
    componentWillMount: function () {           
       /* if (this.props.defaultValue != "") {
            console.info("默认值")
            this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
            this.props.handleBlur(this.props.defaultValue);
            this.setState({
                value: this.props.defaultValue
            })
        }*/
    },
    handleChange: function (event) {
        var value = event.target.value.substr(0, 140)
        this.setState({"value": value});
    },
    handleBlur: function () {
      this.props.setFormValue({"name": this.props.name, "value": this.state.value});
      this.props.handleBlur(this.state.value.replace(/(^\s*)|(\s*$)/g, ""));

    },
    handleFocus: function() {
        this.props.handleFocus&&this.props.handleFocus();
    },
    handleTrigger:function(event){
    	let value = event.target.value;
   		this.props.onChange(value, event);
    },
    render: function () {
        var value = this.state.value;
        //console.log("加载input")
        return (
            <div className="virtual-input">
                <input
                    placeholder={this.props.placeholder}
                    type={this.props.type}
                    className={this.props.className}
                    value={value}
                    defaultValue={this.props.defaultValue}
                    onChange={this.handleChange}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                />
            </div>
        )
    }
});


class Input extends Component {
  constructor (props) {
    super(props);
    this.state = {
      value: props.value
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleTrigger = this.handleTrigger.bind(this);
  }

  componentWillReceiveProps (nextProps) {
    let value = nextProps.value;
    if (value !== this.props.value && value !== this.state.value) {
      this.setState({ value });
    }
  }

  handleChange (event) {
    const { readOnly, type, trigger } = this.props;

    if (readOnly) {
      return;
    }

    let value = event.target.value;

    if (value && (type === 'integer' || type === 'number')) {
      if (!Regs[type].test(value)) {
        value = this.state.value || '';
      }
    }

    this.setState({ value });

    if (trigger === 'change') {
      this.handleTrigger(event);
    }
  }

  handleTrigger (event) {
    let value = event.target.value;
    this.props.onChange(value, event);
  }

  render () {
    const { className, grid, type, trigger, ...other } = this.props;
    const props = {
      className: classnames(
        className,
        'rct-form-control',
        getGrid(grid)
      ),
      onChange: this.handleChange,
      type: type === 'password' ? 'password' : 'text',
      value: this.state.value
    };

    if (trigger !== 'change') {
      let handle = 'on' + trigger.charAt(0).toUpperCase() + trigger.slice(1);
      props[handle] = this.handleTrigger;
    }

    return (<input {...other} {...props} />);
  }
}




Input.propTypes = {
  className: PropTypes.string,  //样式名字
  defaultValue: PropTypes.string, //默认值
  name: PropTypes.string,   // 数据名
  maxLength:PropTypes.string,  //最大长度
  minLength:PropTypes.minLength, //最小长度
  onBlur: PropTypes.func,  //
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  placeholder: PropTypes.string, 
  readOnly: PropTypes.bool,
  disabled:PropTypes.disabled,
  trigger: PropTypes.string,  //触发事件
  type: PropTypes.string,
  value: PropTypes.any,  //值
  lengths:PropTypes.string,  // 多长
  regex:PropTypes.regex,   //正则
};

Input.defaultProps = {
    hasDelBtn:true,
    type:"text",
    trigger:"blur",
    class:"input input-normal"
};


module.exports = INPUT;